<!--我的仓库-->
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/myself' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>我的仓库</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 栅格系统 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入标题" v-model="queryInfo.query" clearable @clear="getHouseList">
            <el-button slot="append" icon="el-icon-search" @click="getHouseList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 列表区域 -->
      <el-table :data="houselist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="标题" prop="housetitle"></el-table-column>
         <el-table-column label="新旧" prop="htype"></el-table-column>
        <el-table-column label="均价(万元/m²)" prop="houseprice"></el-table-column>
        <el-table-column label="面积(m²)" prop="areas"></el-table-column>
        <el-table-column label="发布时间" prop="publishtime"></el-table-column>
        <el-table-column label="主图">
                  <template slot-scope="scope">
                    <el-image style="width:90px; height:65px" :src="scope.row.imgurl">
                    </el-image>
                  </template>
        </el-table-column>
      <!--  <el-table-column label="状态">
          <template slot-scope="scope">
            <p v-if="scope.row.state===0">下架</p>
            <p v-if="scope.row.state===1">出售</p>
          </template>
        </el-table-column> -->
        <!--开关 数字判断再转为布尔值 0下架 1出售-->
       <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-if="scope.row.state===0" :value="false" @change="StateChanged(scope.row)">
            </el-switch>
            <el-switch  v-if="scope.row.state===1" :value="true" @change="StateChanged(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
             <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.houseid)"></el-button>
             </el-tooltip>
            <!-- 删除按钮 -->
             <el-tooltip effect="dark" content="永久删除" placement="top" :enterable="false">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>


    <!-- 修改房源信息的对话框 -->
   <el-dialog title="修改房源" :visible.sync="editDialogVisible" width="70%" @close="editDialogClosed">
     <el-form :model="houseForm" :rules="rules" ref="houseFormRef" label-width="100px" class="demo-houseForm">
       <el-row :gutter="20">
         <el-col :span="8" style="width:40%;padding-left:0 ;">
           <el-form-item label="标题" prop="housetitle">
             <el-input v-model="houseForm.housetitle" placeholder="请输入标题"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6" style="width:30%;padding-left:0 ;">
           <el-form-item label="面积" prop="areas">
             <el-input v-model.number="houseForm.areas" placeholder="请输入面积"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6" style="width:30%;padding-left:0 ;">
           <el-form-item label="单价" prop="houseprice">
             <el-input v-model.number="houseForm.houseprice" placeholder="请输入价格"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
<!--       <el-row :gutter="20">
         <el-col :span="8" style="width:33%;padding-left:0 ;">
           <el-form-item label="朝向" prop="face"> -->
             <!-- 朝向  1东南 2西南 3东北 4西北 -->
           <!--  <el-select v-model="houseForm.face" placeholder="请选择朝向">
               <el-option label="东南" value="1"></el-option>
               <el-option label="西南" value="2"></el-option>
               <el-option label="东北" value="3"></el-option>
               <el-option label="西北" value="4"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6" style="width:33%;padding-left:0 ;">
           <el-form-item label="楼层" prop="floor"> -->
             <!-- 楼层  1:6层以下 2:6-12层 3东北 4西北 -->
<!--             <el-select v-model="houseForm.floor" placeholder="请选择楼层">
               <el-option label="6层以下" value="1"></el-option>
               <el-option label="6-12层" value="2"></el-option>
               <el-option label="12层以上" value="3"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="6" style="width:34%;padding-left:0 ;">
           <el-form-item label="几室几厅" prop="apartment"> -->
             <!-- 几室几厅  1三室 2四室 3五室 4五室以上 -->
           <!--  <el-select v-model="houseForm.apartment" placeholder="请选择">
               <el-option label="三室" value="1"></el-option>
               <el-option label="四室" value="2"></el-option>
               <el-option label="五室" value="3"></el-option>
               <el-option label="五室以上" value="4"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
       </el-row> -->
       <el-row :gutter="20">
         <el-col :span="6" style="width:32%;padding-left:0 ;">
           <el-form-item label="小区名称" prop="areaname">
             <el-input v-model="houseForm.areaname" placeholder="请输入小区名称"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="6" style="width:30%;padding-left:0 ;">
           <el-form-item label="电梯" prop="elevator">
             <el-radio-group v-model="houseForm.elevator">
               <el-radio label="有"></el-radio>
               <el-radio label="无"></el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
         <el-col :span="8" style="width:38%;padding-left:0 ;">
           <el-form-item label="新旧" prop="htype">
             <el-radio-group v-model="houseForm.htype">
               <el-radio label="新房" value="1"></el-radio>
               <el-radio label="二手房" value="2"></el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="16">
<!--         <el-col :span="6" style="width:30%;padding-left:0 ;">
           <el-form-item label="房屋类型" prop="level"> -->
             <!-- 房屋类型   1经济型2中档型3高档型4豪华型-->
       <!--      <el-select v-model="houseForm.level" placeholder="请选择">
               <el-option label="经济型" value="1"></el-option>
               <el-option label="中档型" value="2"></el-option>
               <el-option label="高档型" value="3"></el-option>
               <el-option label="豪华型" value="4"></el-option>
             </el-select>
           </el-form-item>
         </el-col> -->
         <el-col :span="8" style="width:55%;padding-left:0 ;">
           <el-form-item label="描述" prop="houseinfo">
             <el-input type="textarea" v-model="houseForm.houseinfo"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8" style="width:38%;padding-left:0 ;">
           <el-form-item label="原图">
             <template>
               <el-avatar shape="square" :size="100" fit="cover" :src="houseForm.imgurl"></el-avatar>
             </template>
           </el-form-item>
         </el-col>

       </el-row>
       <el-row :gutter="17">
         <el-col :span="12" style="width:68%;padding-left:0 ;">
           <el-form-item label="上传新图">
             <el-upload :auto-upload="false" :on-change="onchange" :on-remove="handleRemove" :limit="1" list-type="picture-card"
               action="#">
               <i class="el-icon-plus"></i>
             </el-upload>
             <!--图片展示-->
             <el-dialog>
               <img width="100%" :src="src" alt="">
             </el-dialog>
           </el-form-item>
         </el-col>
       </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editHouseInfo">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script src="../js/MyHouseList.js">

</script>

<style scoped>
</style>
